<script setup>
import {HomeFilled, List, Mouse, User} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import{useRoute} from "vue-router";
const router = useRouter()
const route = useRoute()
import {ref} from "vue";

const account= ref(route.query.account)
const goBack = () => {
  router.go(-1)
}
</script>
<template>
  <el-page-header v-on:back="goBack">
    <template #content>
      <div style="display: flex; align-items: center;">
        <span>欢迎您</span>
        <el-avatar
            :size="32"
            class="mr-3"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        <span class="text-large font-600 mr-3">{{ account }}</span>
      </div>
    </template>
  </el-page-header>
  <el-container style="height: 100vh;">
    <!-- 左侧菜单栏 -->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246);">
      <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
      >
        <!-- 使用 Vue Router 的导航功能 -->
        <el-menu-item index="/CourseManagement">
          <i class="el-icon-menu"></i>
          <template v-slot:title>
            <el-icon><HomeFilled/></el-icon>
            课程信息管理
          </template>
        </el-menu-item>
        <el-menu-item index="/MajorManagement">
          <i class="el-icon-menu"></i>
          <template v-slot:title>
            <el-icon><List/></el-icon>
            专业信息管理
          </template>
        </el-menu-item>
        <el-menu-item index="/AccountManagement">
          <i class="el-icon-menu"></i>
          <template v-slot:title>
            <el-icon><User/></el-icon>
            账号信息管理
          </template>
        </el-menu-item>
        <el-menu-item index="/CourseSelectionQuery">
          <i class="el-icon-menu"></i>
          <template v-slot:title>
            <el-icon><Mouse/></el-icon>
            选课信息查询
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 主内容区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
.mr-3 {
  margin-right: 12px;
}
</style>